<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="ElementUI/index.css"/>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form :model="form" :rules="myrules">
        <el-form-item label="活动名称" prop="name">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <!--el-form-item里面放的就是表单的各种元素-->
        <el-form-item label="地址">
            <el-input v-model="form.addr"></el-input>
        </el-form-item>

        <el-button type="primary" @click="save">保存</el-button>
    </el-form>

</div>
<script src="ElementUI/vue.js"></script>
<script src="ElementUI/index.js"></script>

<script>
    var vm = new Vue({
        el: "#app",
        data:{
            form: {},
            myrules:{
                name:[
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    {validator:(rule,value , callback)=>{
                            if(value=="你好"){
                                callback()
                            }else{
                                callback("请输入你好")
                            }
                        }


                    }
                ]
            }
        },
        methods:{
            save(){
                console.log(this.form)
            }
        },
        created(){//钩子函数 , 创建后初始化数据 , 通常接受后台传过来的数据 , ajax异步请求


        }
    })
</script>
</body>
</html>